import { useEffect, useState } from 'react'
import api from '../api'

function Profile () {
    const [type, setType] = useState('myArticle')
    const [articleList, setArticleList] = useState([])
    // let [] = useState([])
    let user = sessionStorage.getItem('user') 
    user = user ? JSON.parse(user) : {}

    const config = {
        headers: {
          'Content-Type': 'application/json',
          Authorization: user.token
        }
      }

    const changeArticleType = (type, e) => {
        setType(type)
    }
    const getProfile = async () => {
        try {
          const res = await api.axios.get(api.url.getProfile + user.username, config);
          let response = res.data
          console.log('getProfile', response);
        } catch (error) {
          console.log(error);
        }
    };
    

    const getArticles = async () => {
        console.log('getArticles')
        try {
          const res = await api.axios.get(api.url.getArticles+'?author=' + user.username, config);
          let response = res.data
          console.log('getArticles2', response);
          if(response.code === 0) {
            // let data = res.data.data
            setArticleList(response.data)
          }
        } catch (error) {
          console.log(error);
        }
    };
    getProfile()
    getArticles()

    return (
        <div className="profile-page">
            <div className="user-info">
                <div className="container">
                    <div className="row">
                        <div className="col-xs-12 col-md-10 offset-md-1">
                            <img src="/avator.webp"  alt="头像" className="user-img" />
                            <h4>{user.username}</h4>
                            <p>
                                Cofounder @GoThinkster, lived in Aol's HQ for a few months, kinda looks like Peeta from
                                the Hunger Games
                            </p>
                            <button className="btn btn-sm btn-outline-secondary action-btn">
                                <i className="ion-plus-round" />
                                &nbsp; Follow {user.username}
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div className="container">
                <div className="row">
                    <div className="col-xs-12 col-md-10 offset-md-1">
                        {/* <div className="articles-toggle">
                            <ul className="nav nav-pills outline-active">
                            
                                <li className="nav-item" onClick={(event) => changeArticleType('myArticle', event)}>
                                    <a className="nav-link active" >My Articles</a>
                                </li>
                                <li className="nav-item" onClick={(event) => changeArticleType('favoritedArticles', event)}>
                                    <a className="nav-link" >Favorited Articles</a>
                                </li>
                            </ul>
                        </div>
                        <div className="article-preview">
                            <div className="article-meta">
                                <a href="/profile"><img src="http://localhost:3000/avator.webp"  alt="头像" /></a>
                                <div className="info">
                                    <a href="/profile" className="author">Eric Simons</a>
                                    <span className="date">January 20th</span>
                                </div>
                                <button className="btn btn-outline-primary btn-sm pull-xs-right">
                                    <i className="ion-heart" /> 29
                                </button>
                            </div>
                            <a href="/profile" className="preview-link">
                                <h1>How to build webapps that scale</h1>
                                <p>This is the description for the post.</p>
                                <span>Read more...</span>
                            </a>
                        </div> */}
                        {
                            articleList.map(item => <div className="article-preview">
                            <div className="article-meta">
                                <a href="/profile"><img src="/avator.webp"  alt="头像" /></a>
                                <div className="info">
                                    <a href="/profile" className="author">Albert Pai</a>
                                    <span className="date">{item.author}</span>
                                </div>
                                <button className="btn btn-outline-primary btn-sm pull-xs-right">
                                    <i className="ion-heart" /> {item.favoritesCount}
                                </button>
                            </div>
                            <a href="/profile" className="preview-link">
                                <h1>{item.title}</h1>
                                <p>{item.description}</p>
                                <span>Read more...</span>
                                <ul className="tag-list">
                                    {
                                        item.tagList.map(itm => <li className="tag-default tag-pill tag-outline" key={itm}>{itm}</li>)
                                    }
                                    {/* <li className="tag-default tag-pill tag-outline">Music</li>
                                    <li className="tag-default tag-pill tag-outline">Song</li> */}
                                </ul>
                            </a>
                        </div>)
                        }
                        {/* <div className="article-preview">
                            <div className="article-meta">
                                <a href="/profile"><img src="http://localhost:3000/avator.webp"  alt="头像" /></a>
                                <div className="info">
                                    <a href="/profile" className="author">Albert Pai</a>
                                    <span className="date">January 20th</span>
                                </div>
                                <button className="btn btn-outline-primary btn-sm pull-xs-right">
                                    <i className="ion-heart" /> 32
                                </button>
                            </div>
                            <a href="/profile" className="preview-link">
                                <h1>The song you won't ever stop singing. No matter how hard you try.</h1>
                                <p>This is the description for the post.</p>
                                <span>Read more...</span>
                                <ul className="tag-list">
                                    <li className="tag-default tag-pill tag-outline">Music</li>
                                    <li className="tag-default tag-pill tag-outline">Song</li>
                                </ul>
                            </a>
                        </div> */}
                    </div>
                </div>
            </div>
        </div>
    );
}

export default Profile;